<template>
	<view class="box">
		<view class="top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<view class="toptitle" style="line-height: 88rpx;">{{ text }}</view>
			<image class="back" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" @click="back" />
		</view>
		<view class="top" :style="'padding-top:' + statusBarHeight1 + 'px;background-color: #fff;'">
		</view>
		<view class="content">
			<view class="inputBox">
				<view class="clause" v-for="i in data" :key="i.id">
					<!-- <rich-text :nodes="data.content"></rich-text> -->
					<!-- #ifdef MP-WEIXIN -->
					<rich-text :nodes="i.content"></rich-text>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<p v-html="i.content"></p>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	//#ifdef H5
	import wxshare from "../utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				imgUrl: this.$imgSrc,
				userInfo: uni.getStorageSync("Pduser"),
				type:"",
				text:"",
				data:""
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		onLoad(options) {
			this.type = options.type;
			if (this.type == 2) {
				this.text = "证照资质";
			} else if (this.type == 1) {
				this.text = "常见问题";
			}
			this.getContent();
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getContent() {
				let _this = this;
				_this.$myRequest
					.get("/api/mobile/vehicleOwner/getCommonProblemByType", {
						problemType: this.type
					})
					.then(res => {
						this.data = res.commonProblem;
					});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.fixed {
		position: fixed !important;
		z-index: 99;
	}

	page {
		background: #fff;
	}

	.b {
		font-weight: bold;
		font-size: 30rpx;
	}
	.content {
		/* #ifdef MP */
		height: calc(100vh - 192rpx);
		/* #endif */
		/* #ifdef APP-PLUS || H5 */
		height: calc(100vh - var(--status-bar-height) - 88rpx);

		/* #endif */
		.input {
			width: 690rpx;
			padding: 0 24rpx;
			margin: 0 auto;
			height: 90rpx;
			border: 1rpx solid #e0e0e0;
			font-size: 30rpx;

			input {
				width: 100%;
				height: 100%;
			}
		}
	}

	.inputBox {
		width: 630rpx;
		margin: 0 auto;
		height: 750rpx;
		padding-top: 30rpx;
	}

	.clause {
		font-size: 28rpx;
		white-space: pre-wrap;
		line-height: 50rpx;
		margin-bottom: 50rpx;
	}

	.button {
		width: 550rpx;
		height: 76rpx;
		margin: 0 auto;
		color: #fff;
		background: #64b6a8;
		border-radius: 10000rpx;
		font-size: 34rpx;
		line-height: 76rpx;
		text-align: center;
	}

	.userHeader {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.input-placeholder {
		color: #999999;
	}

	.login-box {
		padding: 90rpx 100rpx 0;

		.box-title {
			line-height: 75rpx;
			font-size: 46rpx;
			margin-bottom: 105rpx;
			color: #64b6a8;
			font-weight: 600;
		}

		.input-box {
			height: 65rpx;
			border-bottom: 1rpx solid #d0d0d0;
			position: relative;
			margin-bottom: 52rpx;

			input {
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #333;
				font-size: 28rpx;
			}

			.area {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 0;
			}

			.line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 60rpx;
				height: 30rpx;
				width: 2rpx;
				background: #333;
			}

			.getcode {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				color: #64b6a8;
				font-size: 28rpx;
				z-index: 10;
			}
		}

		.agreement {
			display: flex;
			padding-left: 10rpx;
			padding-top: 50rpx;
			font-size: 26rpx;
			align-items: center;

			.checkbox-group {
				width: 32rpx !important;
				height: 40rpx !important;
			}

			.text {
				display: flex;
				align-items: center;
				line-height: 37rpx;
				margin-left: 10rpx;
			}

			.tags {
				color: #64b6a8;
			}
		}

		.login {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			background: #64b6a8;
			color: #fff;
			border-radius: 100rpx;
			margin-top: 38rpx;
			margin-bottom: 24rpx;
		}

		.flex-end {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 26rpx;
				line-height: 37rpx;
				color: #666666;
			}
		}
	}

	.motaikuang {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 20;

		.verify {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}

		.shangjia {
			position: absolute;
			width: 600rpx;
			height: 300rpx;
			background-color: #fff;
			border-radius: 10rpx;
			top: 30%;
			left: 50%;
			transform: translateX(-50%);

			.li_1 {
				width: 100%;
				font-size: 34rpx;
				font-weight: 600;
				margin-left: 114rpx;
				margin-top: 80rpx;
			}

			.li_2 {
				display: inline-block;
				vertical-align: top;
				width: 160rpx;
				height: 60rpx;
				background: #ffffff;
				border: 2rpx solid #64b6a8;
				border-radius: 37rpx;
				text-align: center;
				line-height: 60rpx;
				color: #64b6a8;
				margin-top: 58rpx;
				margin-left: 118rpx;
			}

			.li_3 {
				display: inline-block;
				vertical-align: top;
				width: 160rpx;
				height: 60rpx;
				background: #64b6a8;
				border-radius: 37rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				margin-top: 58rpx;
				margin-left: 46rpx;
			}
		}
	}

	.back {
		width: 32rpx !important;
		height: 32rpx !important;
	}
</style>
